<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Gradient Opacity</title>
    <link rel="stylesheet" href="niivue.css" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <button id="openBtn">Choose an image with a dialog</button>
      <section>
        <label id="images"></label>
      </section>
      <label for="gradientOpacity">Gradient Opacity</label>
      <input type="range" min="0" max="10" value="7" class="slider" id="gradientOpacity">
      <label for="silhouetteEnhancement">Silhouette Enhancement</label>
      <input type="range" min="0" max="19" value="0" class="slider" id="silhouetteEnhancement">
      <label for="gradientOrder">Gradient Order</label>
      <select id="gradientOrder">
        <option value="1">1</option>
        <option value="2" selected>2</option>
      </select>
      <label for="illumination">Illumination</label>
      <input type="range" min="0" max="10" value="7" class="slider" id="illumination">
    </header>
    <main id="canvas-container">
      <div style="display: flex; width: 100%; height: 100%">
        <canvas id="gl1" height="1024"></canvas>
      </div>
    </main>
    <footer id="intensity">&nbsp;</footer>
    <script type="module" async>
      import { Niivue, NVImage, SHOW_RENDER, DRAG_MODE } from '../dist/index.js'
      async function addVolumeFromFiles(f) {
        console.log('attempting to open ', f[0].name)
        console.log('details', f[0])
        nv1.removeVolume(nv1.volumes[0])
        nv1.loadFromFile(f[0])
      }
      openBtn.onclick = function () {
        let input = document.createElement('input')
        input.style.display = 'none'
        input.type = 'file'
        document.body.appendChild(input)
        input.onchange = function (event) {
          addVolumeFromFiles(event.target.files)
        }
        input.click()
      }
      gradientOpacity.oninput = function () {
        nv1.setGradientOpacity(gradientOpacity.value * 0.1, silhouetteEnhancement.value * 0.05)
      }
      silhouetteEnhancement.oninput = function () {
        nv1.setGradientOpacity(gradientOpacity.value * 0.1, silhouetteEnhancement.value * 0.05)
      }
      illumination.oninput = function () {
        nv1.setVolumeRenderIllumination(this.value * 0.1)
      }
      gradientOrder.onchange = function () {
        nv1.opts.gradientOrder = parseInt(this.value)
        nv1.updateGLVolume()
      }
      var volumeList1 = [{ url: '../images/mni152.nii.gz' }]

      function handleIntensityChange(data) {
        document.getElementById("intensity").innerHTML = data.string
      }
      const clipPlane = [0.35, 290, 0]
      const defaults = {
        backColor: [0.5, 0.5, 1, 1],
        show3Dcrosshair: true,
        loglevel: 'debug',
        isRuler: true,
        gradientOpacity: 0.7,
        onLocationChange: handleIntensityChange,
      }
      var nv1 = new Niivue(defaults)
      await nv1.attachToCanvas(gl1)
      nv1.loadVolumes(volumeList1)
      nv1.setSliceType(nv1.sliceTypeRender)
      nv1.setClipPlane(clipPlane)
      nv1.opts.gradientOrder = 2
      nv1.setVolumeRenderIllumination(0.7)

      let imgs = [
        "chris_MRA",
        "chris_PD",
        "chris_t1",
        "chris_t2",
        "CT_Abdo",
        "CT_AVM",
        "CT_Electrodes",
        "CT_Philips",
        "CT_pitch",
        "fmri_pitch",
        "Iguana",
        "mni152",
        "MR_Gd",
        "pcasl",
        "spm152",
        "spmMotor",
        "visiblehuman",
      ]
      let imgEl = document.getElementById("images")
      for (let i = 0; i < imgs.length; i++) {
        let btn = document.createElement("button")
        btn.innerHTML = imgs[i]
        btn.onclick = function () {
          let root = "https://niivue.github.io/niivue-demo-images/"
          let img = root + imgs[i] + ".nii.gz"
          console.log("Loading: " + img)
          volumeList1[0].url = img
          nv1.removeVolume(nv1.volumes[0])
          nv1.loadVolumes(volumeList1)
          nv1.updateGLVolume()
        }
        imgEl.appendChild(btn)
      }
    </script>
  </body>
</html>
